Vue.component("my-header", {
  data: function () {
    return {
      isLogin: false,
      user: {},
    };
  },
  methods: {},
  //进入当前页面时就发出请求获取内容
  created: function () {
    //进入首页时发出请求，获取当前会话对象中保存的内容，是否和后台传输的数据类型一致
    axios.get("/v1/currentUser").then(function (response) {
      //服务器返回一个用户对象
      this.user = response.data();
      //用三目运算符来判断当前用户对象是否有值
      this.isLogin = this.user === "" ? 0 : 1;
    });
  },
  template: `
        <el-header height="80px">
            <!-- 设置头部的宽度 -->
            <div class="center">
                <el-row gutter="20">
                    <el-col :span="6">
                        <img src="imgs/icon.png">
                    </el-col>
                    <el-col :span="10">
                        <!--:default-avtive 设置默认选中的位置
                            mode="horizontal" 用来设置横向显示 去掉mode纵向显示
                        -->
                        <el-menu mode="horizontal">
                            <el-menu-item>
                            <a href="./index.html" style="text-decoration: none">主页</a>
                            </el-menu-item>
                            <el-menu-item>食谱</el-menu-item>
                            <el-menu-item>视频</el-menu-item>
                            <el-menu-item>资讯</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="请输入搜索的关键字" style="margin-top: 15px">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-popover
                        v-if="isLogin == false"
                                placement="top-start"
                                title="欢迎来到烘焙坊"
                                width="200"
                                trigger="hover">
                            <div slot="reference">
                                <i class="el-icon-user" style="font-size: 30px;position: relative; top: 20px"></i>
                            </div>
                            <el-button type="info">
                            <a href="./reg.html" style="color: white;text-decoration: none">注册</a>
                            </el-button>
                            <el-button style="background-color: orange">
                            <a href="./login.html" style="color: white;text-decoration: none">登录</a>
                            </el-button>
                        </el-popover>
                        
                                                <el-popover
                        v-else
                                placement="top-start"
                                title="欢迎来到烘焙坊"
                                width="200"
                                trigger="hover">
                            <div slot="reference">
                                <i class="el-icon-user" style="font-size: 30px;position: relative; top: 20px"></i>
                            </div>
                            <el-button type="info">
                            <a href="./reg.html" style="color: white;text-decoration: none">退出登录</a>
                            </el-button>
                        </el-popover>
                    </el-col>
                </el-row>
            </div>
        </el-header>
    `,
});
